{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/shopcart.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>购物车</p>
            </div>
        </div>
    </div>
</header>
<!-- 购物车 -->
<div class="shopcart normalBox container">
    <div class="cartWrap">
        <table class="table table-bordered">
            <tr class="firsttr">
                <td class="firsttd">商品详情</td>
                <td>订购周期</td>
                <td>小计(元)</td>
                <td>操作</td>
            </tr>
            {volist name="cart" id="ct"}
            <tr>
                <td>
                    <div class="tbbox">
                        <p>{$ct.operator_type}</p>
                        <p>{$ct.card_type}{$ct.total}/{$ct.pkg_kind}</p>
                        <p>{$ct.material}</p>
                        <p>单张卡费: ￥{$ct.material_price} </p>
                        <p>单价:<span>￥{$ct.pkg_price}</span></p>
                        <p>数量:<span>x{$ct.number}</span></p>
                    </div>
                </td>
                <td>{$ct.cycle}{$ct.pkg_kind}</td>
                <td>￥{$ct.small_plan}</td>
                <td>
                    <a href="javascript:;" data-id="{$ct.id}" class="btn delete">
                        <span class="glyphicon glyphicon-trash"></span>删除
                    </a>
                </td>
            </tr>
            {/volist}
        </table>
    </div>
</div>
<div class="bottombg">
</div>
<div class="navbar navbar-fixed-bottom bottomBox">
    <div class="container">
        <div class="row">
            {if condition="$cart eq false"}
            <div class="col-xs-8 pads">购物车为空，请先加入购物车</div>
            {else/}
            <div class="col-xs-4 pads">全场满600元包邮</div>
            <div class="col-xs-4 pads">合计：￥<span id="total_price">{$total_price}</span></div>
            {/if}
            <div class="col-xs-4">
                {if condition="$cart eq false"}
                <a href="{:url('/home/Shop/index')}" class="btn balance">在线购卡</a>
                {else/}
                <a href="{:url('/home/Shop/settlement')}" class="btn balance">结算</a>
                {/if}
            </div>
        </div>
    </div>
</div>
<!--确认删除弹窗-->
<div class="modal fade" id="deleteModal">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <!-- 隐藏需要删除的id -->
                <input type="hidden" id="deleteHaulId"/>
                <p>您确认要删除购物车数据？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="deleteHaulBtn">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        // 弹出确认弹窗
        $('.delete').on('click',function(){
            var delete_id = $(this).data('id');
            $("#deleteHaulId").val(delete_id);
            $("#deleteModal").modal('show');
        })

        // 确认删除
        $('#deleteHaulBtn').on('click',function(){
            var hide_id = $("#deleteHaulId").val();
            $.post("{:url('/home/Shop/deleteCart')}",{'id':hide_id},function(data){
                $('#deleteModal').modal('hide');   // 隐藏弹窗
                $('#deleteModal').on('hidden.bs.modal',function(){   // 弹窗完全隐藏之后提示结果
                    reminder(data.msg);
                })
                if(!data.code){
                    var total_price = $('#total_price').text();
                    var small_plan = $('.delete[data-id="'+hide_id+'"]').parent().prev().text();
                    var new_price = total_price - small_plan.split('￥')['1'];
                    $('#total_price').text(new_price);   // 合计价格改变
                    $('.delete[data-id="'+hide_id+'"]').parents('tr').remove();  // 删除节点
                    if($('.table tr').length == 1){   // 购物车数据为空
                        $('.navbar .row').empty();
                        var _html = '<div class="col-xs-8 pads">购物车为空，请先加入购物车</div>' +
                                    '<div class="col-xs-4">' +
                                    '<a href="/home/Shop/index" class="btn balance">在线购卡</a>' +
                                 '</div>';
                        $('.navbar .row').append(_html);
                    }
                }
            })
        })

    })
</script>
</body>
</html>